<template>
	<van-pull-refresh v-model="isLoading" @refresh="onRefresh" :disabled="refDisabled">
	<div class="content" ref="pageInfo">
		<div class="tips flex2">
			<div class="flex1" v-if='userInfo.pid' @click="showPicker=true">
				<div>就诊人 <span>{{userInfo.pat_name||''}}（{{userInfo.phno||''}}）</span></div>
				<img src="@/assets/img/index/more_w.png" alt="">
			</div>
			<div class="flex1" v-else @click="toPageLink('/addVisitor')">
				添加就诊人
				<img src="@/assets/img/index/more_w.png" alt="">
			</div>
		</div>
		<back-img></back-img>
		
		<div class="info">
			<van-tabs v-model="active" @change='change'>
			  <van-tab :title="item.name" title-inactive-color='#777' title-active-color='#292929' v-for="(item,index) in tabList" :key="index" />
			</van-tabs>
			<div class="info-list" v-if='active==0'>
				<div class="info-list-info" @click="toDetalis(v)" v-for="(v,i) in dataList" :key='i'>
					<div class="info-list-info-t flex1">
						山西天慈医院 <i class='more_gIcon'></i>
					</div>
					<van-cell-group :border='false'>
					  <van-cell :border='false' title="患者姓名" :value="userInfo.pat_name" />
					  <van-cell :border='false' title="就诊科室" :value="v.apply_dept_name+'-'+v.doctor"/>
					  <van-cell value-class='c_FF1529' :border='false' title="缴费金额" :value="v.should_money+'元'"/>
					   <van-cell :border='false' title="开单时间" :value="v.receipt_time||''"/>
					</van-cell-group>
				</div>
			</div>
			<div class="info-list" v-if='active==1'>
				<div class="info-list-info" @click="toDetalis(v)" v-for="(v,i) in dataList" :key='i'>
					<div class="info-list-info-t flex1">
						山西天慈医院 <i class='more_gIcon'></i>
					</div>
					<van-cell-group :border='false'>
					  <van-cell :border='false' title="患者姓名" :value="userInfo.pat_name" />
					  <van-cell :border='false' title="就诊科室" :value="v.fee_info[0].apply_dept_name+'-'+v.fee_info[0].doctor"/>
					  <van-cell value-class='c_FF1529' :border='false' title="缴费金额" :value="v.total_money+'元'"/>
					   <van-cell :border='false' title="支付时间" :value="v.sett_info[0].pay_time||''"/>
					</van-cell-group>
				</div>
			</div>
		</div>
		<van-popup v-model:show="showPicker" round position="bottom">
		  <van-picker
		    :show-toolbar='true'
		    :columns="columns"
			value-key='pat_name'
		    @cancel="showPicker = false"
		    @confirm="onConfirm"
		  />
		</van-popup>
	</div>
	</van-pull-refresh>
</template>

<script>
	export default {
		data() {
			return {
				isLoading: false,
				scrollTop:0,
				refDisabled:false,
				columns:[],
				userInfo:{},
				showPicker:false,
				active:0,
				tabList:[
					{name:'待缴费',type:1},
					{name:'已缴费',type:2}
				],
				dataList:[]
			};
		},
		created() {
			this.petList()
		},
		mounted(){
			let box = this.$refs.pageInfo;
			box.addEventListener('scroll',()=>{
				this.scrollTop = box.scrollTop;
			});
		},
		watch: {
			scrollTop(val){
				if(val==0){
					this.refDisabled=false
				}else{
					this.refDisabled=true
				}
			}
		},
		methods: {
			onRefresh() {
				this.getList()
				setTimeout(() => {
					this.isLoading = false;
				}, 500);
			},
			toDetalis(v){
				if(this.active==0){//未缴费
					this.$router.push({
						path:'/payshow',
						query:{
							receipt_no:v.receipt_no,
							pid:v.pid
						},
					})
				}else{
					// this.$router.push({
					// 	path:'/registerShow',
					// 	query:{
					// 		rgst_no:v.rgst_no,
					// 		pid:v.pid
					// 	},
					// })
				}
			},
			petList() {
				let that=this
				let url = "/api/pat/list";
				this.$axios.get(url).then(res => {
					that.columns = res.pat_info
					var user={}
					if(that.columns.length>0){
						that.columns.forEach((item, index) => {
							if(item.is_self){
								user=item
							}
						})
					}
					if(!user.id&&that.columns.length>0){
						user=that.columns[0]
					}
					that.userInfo=user
					if(that.userInfo.pid){
						that.getList()
					}
				})
				.catch(err => {
					console.log("err", err);
				});
			},
			getNopayList(){
				let that=this
				let url = "/api/his/unpaid_receipt";
				this.$axios.post(url,{
					query_key:'1',
					query_content:that.userInfo.pid
				}).then(res => {
					that.dataList=res.fee_info
				}).catch(err => {
					console.log("err", err);
				});
			},
			getList(){
				let that=this
				if(!that.userInfo.pid){
					return
				}
				if(that.active==0){
					return that.getNopayList()
				}
				let url = "/api/his/paid_receipt";
				this.$axios.post(url,{
					query_key:'1',
					query_content:that.userInfo.pid,
					// charge_type:that.tabList[that.active].type,//查已缴费
				}).then(res => {
					that.dataList=res.fee_charge
				}).catch(err => {
					console.log("err", err);
				});
			},
			change(e){
				this.active=e
				this.dataList=[]
				this.getList()
			},
			onConfirm(e){
				this.showPicker=false
				this.dataList=[]
				this.userInfo=e
				this.getList()
			},
			chooseTime(i){
				this.timeIndex=i
			},
			toPageLink(url){
				this.$router.push({
					path:url,
					query:{},
				})
			}
		}
	};
</script>

<style lang="less" scoped>
	.content{
		min-height: 100vh;
		background-color:#f0f8f8;
		/deep/.van-cell{
			padding: 7px 0;
		}
		/deep/.van-tabs__line{
			background: #4A8CFF;
		}
		/deep/.van-field__control{
			text-align: right;
		}
		/deep/.van-cell__title{
			font-size: 15px;
			font-family: PingFang;
			font-weight: 500;
			color: #333333;
		}
		/deep/.van-cell__value{
			font-size: 14px;
			font-family: PingFang;
			font-weight: 500;
			color: #333333;
		}
		.payTips{
			background: #FFFFFF;
			border-radius: 5px;
			padding: 12px;
			font-size: 11px;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #999;
			line-height: 18px;
			span{
				color: #e7091a;
				display: inline-block;
				margin-bottom:7px;
			}
		}
		.payBtn{
			width: 296px;
			height: 38px;
			background: linear-gradient(90deg, #5CD2A3 0%, #3EC6D9 100%);
			border-radius: 19px;
			margin: 23px auto 75px auto;
			font-size: 15px;
			font-family: MiSans;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 38px;
		}
		.payInfo{
			background-color: #fff;
			border-radius: 5px;
			&-i{
				padding:10px 18px;
				font-size: 14px;
				font-family: SourceHanSansCN;
				font-weight: 400;
				color: #333333;
				&-info{
					display: flex;
					align-items: center;
				}
				&-img{
					width: 15px;
					margin-right:5px;
				}
				&-choose{
					width: 15px;
					height: 15px;
					background-color: #0ebea1;
					border-radius: 50%;
					img{
						width: 12px;
					}
				}
			}
		}
		.info{
			padding-top: 54px;
			&-list{
				margin: 10px 15px;
				&-info{
					padding-bottom: 7px;
					width: 346px;
					background: #FFFFFF;
					border-radius: 5px;
					padding: 0 11px;
					margin-bottom: 10px;
					&-t{
						padding: 15px 0;
						font-size: 15px;
						font-family: PingFang;
						font-weight: 500;
						color: #333333;
						border-bottom: 1px solid #EEEEEE;
						margin-bottom: 7px;
					}
				}
			}
		}
		.tips{
			position: fixed;
			top: 0;
			padding:0 18px;
			width: 375px;
			height: 44px;
			background: linear-gradient(-90deg, #68E198 0%, #13BAB8 100%);
			font-size: 15px;
			font-family: MiSans;
			font-weight: 500;
			color: #FFFFFF;
			span{
				margin-left: 23px;
			}
			img{
				width: 20px;
			}
		}
	}
</style>